<template>
    <!-- 模式1 瀑布流 模式2 列表模式 -->
    <view :class="'goods-list-c goods-list-c-' + set.showType" :style="{ '--app-color': set.app_color }">
        <view class="left">
            <view class="goods-info" v-for="(list, key) in data" v-if="set.showType == 2 ? true : key % 2 == 0"
                @click="clickt(list.id)" :key="key">
                <view class="goods-img">
                    <image mode="aspectFill"
                        :style="{ 'width': set.showType == 2 ? '240rpx' : '100%', 'height': set.showType == 2 ? '240rpx' : 'auto', }"
                        :src="list.img"></image>
                    <image mode="aspectFill" v-if="list.stock <= 0" class="left-top-img" :src="set.stock_icon">
                    </image>
                    <image mode="aspectFill" v-else-if="list.is_recommend == 1" class="left-top-img"
                        :src="set.recommend_icon"></image>
                    <!-- <view class="recommend_icon">推荐</view> -->
                </view>
                <view class="goods-text">
                    <text class="u-line-2 goods-title">{{ list.title }}</text>
                    <!-- 标签 -->
                    <view class="tabs">
                        <view class="tabs-item" v-if="list.free_freight == 1">包邮</view>
                    </view>
                    <view class="left-price" :style="'color: ' + set.app_color" v-if="list.shop_price > 0">
                        <view>￥<text style="font-size: 32rpx;">{{ list.shop_price }}</text>
                        </view>
                        <!-- 下划线样式 -->
                        <view v-if="list.market_price > list.shop_price"
                            style="color: #999; text-decoration: line-through;">￥{{ list.market_price }}</view>
                    </view>
                    <text class="left-price" v-else :style="'color: ' + set.app_color">免费</text>
                    <view class="price-info">
                        <view class="snum">已售：{{ Number(list.snum) + Number(list.origin_snum) }}</view>
                        <image :src="set.cart_icon" mode="aspectFill"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="right">
            <view class="goods-info" v-for="(list, key) in data" v-if="set.showType == 2 ? false : key % 2 != 0"
                @click="clickt(list.id)" :key="key">
                <view class="goods-img">
                    <image mode="aspectFill"
                        :style="{ 'width': set.showType == 2 ? '240rpx' : '100%', 'height': set.showType == 2 ? '240rpx' : 'auto', }"
                        :src="list.img"></image>
                    <image mode="aspectFill" v-if="list.stock <= 0" class="left-top-img" :src="set.stock_icon">
                    </image>
                    <image mode="aspectFill" v-else-if="list.is_recommend == 1" class="left-top-img" style=""
                        :src="set.recommend_icon"></image>
                    <!-- <view class="recommend_icon">推荐</view> -->
                </view>
                <view class="goods-text">
                    <text class="u-line-2 goods-title">{{ list.title }}</text>
                    <view class="tabs">
                        <view class="tabs-item" v-if="list.free_freight == 1">包邮</view>
                    </view>
                    <view class="left-price" :style="'color: ' + set.app_color" v-if="list.shop_price > 0">
                        <view>￥<text style="font-size: 32rpx;">{{ list.shop_price }}</text>
                        </view>
                        <!-- 下划线样式 -->
                        <view v-if="list.market_price > list.shop_price"
                            style="color: #999; text-decoration: line-through;">￥{{ list.market_price }}</view>
                    </view>
                    <view class="left-price" v-else :style="'color: ' + set.app_color">免费</view>
                    <view class="price-info">
                        <view class="snum">已售：{{ Number(list.snum) + Number(list.origin_snum) }}</view>
                        <image :src="set.cart_icon" mode="aspectFill"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "diy-grid-goods",
    data() {
        return {
            data: [],
        };
    }, props: {
        set: {
            type: Object,
            default() {
                return {
                    showType: 2,
                    app_color: "red",
                    cart_icon: 'https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/tabbar/tab_1_cur_tab.png',
                    recommend_icon: "https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/tuijian.png",
                    stock_icon: "https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/shouqing.png",
                    goods: []
                }
            }
        },
        goodsList: {
            type: Array,
            default() {
                return []
            }
        },
        hasMore: {
            type: Boolean,
            default() {
                return true
            }
        }
    },
    watch: {
        goodsList: {
            handler(newVal) {
                if (this.set.goods.length) {
                    // 如果有设置固定商品 ID，保持原逻辑
                    return;
                }
                this.data = newVal;
            },
            deep: true
        }
    },
    methods: {
        clickt(id) {
            this.navto('page_mall/goods/info?id=' + id);
        }
    }, created() {
        if (this.set.goods.length) {
            let self = this;
            this.moxiPost('/plugin/mall/index/goods/goods_list', { goods_id: this.set.goods }, function (data) {
                self.data = data.data;
            }, false)
        } else {
            this.data = this.goodsList;
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-list-c {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14rpx;
    padding: 0 8px;

    .left,
    .right {
        display: flex;
        flex-direction: column;
        gap: 24rpx;
    }

    .goods-info {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        border-radius: 12rpx;
        overflow: hidden;

        .goods-img {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            height: auto;
            display: flex;
        }

        .goods-text {
            display: flex;
            flex-direction: column;
            padding: 12rpx 16rpx 28rpx;

            .goods-title {
                color: #333333;
                font-size: clamp(12px, 24rpx, 20px);
                margin-bottom: 12rpx;
            }

            // tabs
            .tabs {
                display: flex;
                flex-direction: row;
                gap: 16rpx;
                align-items: center;
                font-size: 20rpx;
                color: #fff;
                flex-wrap: wrap;
                margin-bottom: 12rpx;

                .tabs-item {
                    background-color: var(--app-color);
                    height: 28rpx;
                    line-height: 28rpx;
                    padding: 0 16rpx;
                    border-radius: 999rpx;
                }
            }

            .left-price {
                font-weight: bold;
                margin-bottom: 8rpx;
                font-size: 20rpx;
                display: flex;
                gap: 4px;
                align-items: baseline;
            }

            .price-info {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            .snum {
                font-size: 20rpx;
                color: #999;
            }
        }
    }
}

.goods-list-c-2 {
    display: flex;
    flex-direction: column;
    gap: 0;

    .goods-info {
        padding: 20rpx 24rpx;
        display: flex;
        flex-direction: row;
        background-color: #fff;
        border-radius: 12rpx;
        flex: 1;

        .goods-img {
            flex-shrink: 0;
            width: 240rpx !important;
            height: 240rpx !important;
            border-radius: 12rpx;
            overflow: hidden;
        }

        .goods-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 12rpx;
            padding: 0 !important;
            flex: 1;
        }
    }
}

.left-top-img {
    max-width: 45px;
    max-height: 45px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
</style>